<template>
  <div id="chart" style="width: 600px;height: 600px;">
  </div>
</template>

<script>
  import * as echarts from 'echarts';
    export default {
      name: "station1",
      props: {
        chartData: {
          type: Array,
          default: () => []
        }
      }, mounted() {
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        var option;
        /*第二个图表*/
        option = {
          title:{

            text:'部分城市驿站数量分布'},
          legend: {
            top: 'bottom'
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          series: [
            {
              name: '面积模式',
              type: 'pie',
              radius: [20, 150],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: [
                {value: 40, name: '天津'},
                {value: 38, name: '上海'},
                {value: 32, name: '南京'},
                {value: 30, name: '北京'},
                {value: 28, name: '西安'},
                {value: 26, name: '济南'},
                {value: 22, name: '赤峰'},
                {value: 18, name: '石家庄'}
              ]
            }
          ]
        };
        /*第二个图表*/
        myChart.setOption(option)

      }

    }
</script>

<style scoped>

</style>
